<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Document</title>
    <script src="lib/webgl-utils.js"></script>
    <script src="lib/webgl-debug.js"></script>
    <script src="lib/cuon-utils.js"></script>
    <script src="lib/cuon-matrix.js"></script>
</head>
<body onload="main()">
<canvas id="mybox" width="500" height="500">
    请更换新版浏览器查看效果!
</canvas>
<script>
    let VSHADER_SOURCE = `
    attribute vec4 a_position;
    uniform mat4 u_modelMatrix;
    void main(){
        gl_Position=u_modelMatrix*a_position;
        }`;
    let FSHADER_SOURCE = `
    void main(){
        gl_FragColor=vec4(1.0,0.3,0.3,1.0);
        }`;
    let ANGLE = 60, Tx = 0.5;

    function main () {
        let canvas = document.getElementById('mybox');
        let gl = getWebGLContext(canvas);
        if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
            console.log('初始化shader失败');
            return;
        }
        let n = initVertexBuffers(gl);
        if (n < 0) {
            console.log('设置顶点位置失败');
            return;
        }
        let u_modelMatrix = gl.getUniformLocation(gl.program, 'u_modelMatrix');
        let modelMatrix = new Matrix4();
        modelMatrix.setTranslate(0, 0, 0);
        // modelMatrix.rotate(ANGLE, 0, 0, 1);
        // modelMatrix.scale(0.2, 1, 1);
        gl.uniformMatrix4fv(u_modelMatrix, false, modelMatrix.elements);


        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLES, 0, n);


    }

    function initVertexBuffers (gl) {
        let vertices = new Float32Array([0.0, 0.3, -0.3, 0.0, 0.3, 0.0]);
        let n = 3;
        let vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
        let a_position = gl.getAttribLocation(gl.program, 'a_position');
        gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_position);
        return n;
    }


</script>

</body>
</html>